/**
 * iview datePicker 选择某一天前后的日期范围
 * @Author: 张威
 * @Date: 2019-06-03 16:46:34
 * @Last Modified by: 张威
 * @Last Modified time: 2019-06-04 14:01:49
 */
export default {
  data () {
    return {
      dateRangeDisabledOptions: {}
    }
  },
  watch: {
    dateRangeDisabledOptions (obj) {
      if (obj.disabledDate) {
        this.$refs.creationTime.$el.querySelector('.ivu-picker-confirm-time').setAttribute('disabled', 'disabled')
      } else {
        this.$refs.creationTime.$el.querySelector('.ivu-picker-confirm-time').removeAttribute('disabled')
      }
    }
  },
  methods: {
    /**
     * @param datepicker 日期选择器vue实例
     * @param range 只能选择的日期范围，默认前后七天
     */
    selectDateRangeDisabled (datepicker, range = 7) {
      this._range = range
      this._leftHalf = datepicker.$el.querySelector('.ivu-picker-panel-content-left')
      this._rightHalf = datepicker.$el.querySelector('.ivu-picker-panel-content-right')
      this._leftHalf.addEventListener('click', this._leftDatePickerClick)
      this._rightHalf.addEventListener('click', this._rightDatePickerClick)
    },
    clearDatePicker () {
      this.dateRangeDisabledOptions = {}
    },
    clickoutside () {
      this.dateRangeDisabledOptions = {}
    },
    _leftDatePickerClick (evt) {
      this._datePickerClick(evt, 0)
    },
    _rightDatePickerClick (evt) {
      this._datePickerClick(evt, 1)
    },
    _datePickerClick (evt, direction) {
      const options = Object.keys(this.dateRangeDisabledOptions)
      const node = evt.target
      const htmlStr = node.innerHTML
      let date = ''
      if (node.nodeName === 'EM' && !node.parentNode.className.includes('ivu-date-picker-cells-cell-disabled')) {
        if (node.parentNode.parentNode && node.parentNode.parentNode.className === 'ivu-date-picker-cells') {
          if (!options.length) {
            date = htmlStr
            this._getDate(date, direction)
          } else {
            this.dateRangeDisabledOptions = {}
          }
        } else if (!node.parentNode.parentNode) {
          this.dateRangeDisabledOptions = {}
        }
      } else if (node.className.includes('ivu-date-picker-cells-cell') && !node.className.includes('ivu-date-picker-cells-cell-disabled')) {
        if (node.parentNode && node.parentNode.className === 'ivu-date-picker-cells') {
          if (!options.length) {
            const result = htmlStr.match(/[^><]+(?=<\/em>)/)
            date = result[0]
            this._getDate(date, direction)
          } else {
            this.dateRangeDisabledOptions = {}
          }
        } else if (!node.parentNode) {
          this.dateRangeDisabledOptions = {}
        }
      }
    },
    _getDate (date, direction) {
      let clickTime
      const directionNode = direction ? this._rightHalf : this._leftHalf
      const yearMonth = directionNode.querySelectorAll('.ivu-date-picker-header .ivu-date-picker-header-label')
      let year, month
      yearMonth.forEach(node => {
        const context = node.innerHTML
        if (context.includes('年')) {
          year = parseFloat(context)
        } else {
          month = parseFloat(context)
        }
      })
      clickTime = `${year}-${month}-${date}`
      const time = new Date(clickTime).getTime()
      const week = (this._range - 1) * 24 * 60 * 60 * 1000
      this.dateRangeDisabledOptions = {
        disabledDate (date) {
          return date.valueOf() < time - week || date.valueOf() > time + week
        }
      }
    }
  }
}
